<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .section { text-align: center; font: 50px "Microsoft Yahei"; color: red;}
    </style>
    <link rel="stylesheet" href="dist/jquery.fullpage.css">

    <script src="../../../lib/jquery-1.12.1.min.js"></script>
    <script src="dist/jquery-ui-1.10.3.min.js"></script>
    <script src="dist/jquery.fullpage.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                navigation: true
            });
        });
    </script>
</head>
<body>

    <div id="fullpage">
        <div class="section">
            <h3>第一屏</h3>
            <p>fullPage.js — 项目导航演示</p>
        </div>
        <div class="section">
            <h3>第二屏</h3>
            <p>请查看右边的圆圈</p>
        </div>
        <div class="section">
            <h3>第三屏</h3>
            <p>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</p>
        </div>
        <div class="section">
            <h3>第四屏</h3>
            <p>这是最后一屏</p>
        </div>
    </div>

</body>
</html>